<html>
    <script>
        window.onload = function() {
            document.getElementById("feedback").action = submitFeedback();
        }
        //    function submitFeedback(){
        $('#feedback').submit(function(e){
            e.preventDefault();
            var name = document.getElementById("name").value;
            var affiliation = document.getElementById("affiliation").value;
            var email = document.getElementById("email").value;
            var category = document.getElementById("category").value;
            var comment = document.getElementById("comment").value;
            var captcha = document.getElementById("captcha").value;
            var word = "<?php print $captcha['word']; ?>";
            if(name == ''){
                document.getElementById("td_name").className = "field danger";
//                document.getElementById("name").value = "Please enter your name";
                document.getElementById("name").style.color = "white";
            } else {
                document.getElementById("td_name").className = "field";
                document.getElementById("name").style.color = "";
            }
            if(affiliation == ''){
                document.getElementById("td_affiliation").className = "field danger";
//                document.getElementById("affiliation").value = "Please enter your name";
                document.getElementById("affiliation").style.color = "white";
            } else {
                document.getElementById("td_affiliation").className = "field";
                document.getElementById("affiliation").style.color = "";
            }
            if(email == ''){
                document.getElementById("td_email").className = "field danger";
//                document.getElementById("email").value = "Please enter your name";
                document.getElementById("email").style.color = "white";
            } else {
                document.getElementById("td_email").className = "field";
                document.getElementById("email").style.color = "";
            }
            if(comment == ''){
                document.getElementById("td_comment").className = "field danger";
//                document.getElementById("comment").value = "Please enter your name";
                document.getElementById("comment").style.color = "white";
            } else {
                document.getElementById("td_comment").className = "field";
                document.getElementById("comment").style.color = "";
            }
            if(captcha == ''){
                document.getElementById("td_captcha").className = "field danger";
//                document.getElementById("captcha").value = "Please enter your name";
                document.getElementById("captcha").style.color = "white";
            } else {
                document.getElementById("td_captcha").className = "field";
                document.getElementById("captcha").style.color = "";
            }
            if(name == '' || captcha == '' || email == '' || affiliation =='' || comment == ''){
                alert('Please fill the form in red')
                return false;
            }
            captcha = captcha.toLowerCase();
//            alert(captcha + ' ' + word.toLowerCase())
            if(word.toLowerCase() != captcha){
                alert('Captcha not match, please re-enter captcha.')
                return false;
            }
            var r = confirm("Are you confirm to submit feedback?");
            if(r == true){
                var url = baseurl + "citportal/submitFeedback";
                $.ajax({
                    type: "POST",
                    url: url,
                    data: {
                        'name': name,
                        'email': email,
                        'category': category,
                        'comment': comment,
                        'affiliation': affiliation,
                        'captcha': captcha
                    },
                    success: function(data){
                        if(data){
                            alert("Feedback has been successfully submitted!");
                            location.reload(true);
                        } else {
                            
                        }
                    }
                })
            }
        });
    </script>
    <h4>Feedback</h4>
    <hr>
    <p class="disclaimer" style="text-align: left; font-size: 13px"> Please fill in all the following blanks to send us your opinions on this website,
        suggestions for our tutorials and tools as well as questions encountered when using them.</p>
<?php $email = $data['email']; $affiliation = $data['affiliation']; $name = $data['name']; $comment = $data['comment']?>
    <form id="feedback" method="post">
        <fieldset>
            <table class="dataTable">
                <tr>
                    <td>Name:</td>
                    <td id="td_name"class="field"><input class="text input" placeholder="name" required type="text" id="name" name="name" maxlength="40" value="<?php echo $name; ?>" /></td>
                </tr>
                <tr>
                    <td>Affiliation:</td>
                    <td id="td_affiliation" class="field"><input class="text input" placeholder="affiliation" required="true" type="text" id="affiliation" name="affiliation" maxlength="127" value="<?php echo $affiliation; ?>" /></td>
                </tr>
                <tr>
                    <td>Email:</td>
                    <td id="td_email" class="field"><input class="email input" placeholder="email" required="true" type="email" id ="email" name="email" maxlength="40" value="<?php echo $email; ?>" /></td>
                </tr>
                <tr>
                    <td>Category:</td>
                    <td class="field">
                        <div class="picker">
                            <select name="category" id="category">
                                <option value="tutorials">Tutorials</option>
                                <option value="publications">Publications</option>
                                <option value="tools">Tools</option>
                                <option value="website">Website</option>                  
                            </select>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>Comments:</td>
                    <td id="td_comment" class="field"><textarea class="input textarea" required="true" placeholder="feedback" id="comment" name="comments" row="4"><?php echo $comment; ?></textarea></td>
                </tr>
                <tr>
                    <td id="test">
                        <?php 
                        echo $captcha['image'];
                        ?>
                    </td>
                    <td id="td_captcha" class="field">
                        <input class="text input" placeholder="Please enter the text from the image left" required="true" type="text" id ="captcha" name="captcha" maxlength="40" value="" />
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td class="medium default  btn" style="float: right; margin-right: 10px; border-radius: 4px;" ><?php echo form_error('captcha');?><input type="submit" value="Submit" onclick="" /></td>
                </tr>
            </table>
        </fieldset>
    </form>
</html>